<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>crm Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="/static/js/jquery-1.2.1.pack.js" type="text/javascript"></script>

<link href="/static/css/general.css" rel="stylesheet" type="text/css" media="screen" />
<script language="javascript">
$(document).ready(function() {
	$("span[name='list']").click(function() {
		if ($(this).parents("li").attr("class") == "explode") {
			$(this).parents("li").removeClass("explode").addClass("collapse");
			$(this).next("ul").hide();
		} else {
			$(this).parents("li").removeClass("collapse").addClass("explode");
			$(this).next("ul").show();
		}
	});
	$('div.menu-one').click(function(){
		if ($(this).attr("title") == "close") {
			$(this).next('ul').children("li[class='collapse']").children('ul').show();
			$(this).next('ul').children("li[class='collapse']").removeClass("collapse").addClass("explode");
			$(this).attr({
				src: "/static/images/menu_minus.gif",
				title: "open"
			});
		} else {
			$(this).next('ul').children("li[class='explode']").children('ul').hide();
			$(this).next('ul').children("li[class='explode']").removeClass("explode").addClass("collapse");
			$(this).attr({
				src: "/static/images/menu_plus.gif",
				title: "close"
			});
		}
	})
	$("#toggle").click(function() {
		if ($(this).attr("title") == "close") {
			$("li[class='explode'] > ul").hide();
			$("li[class='explode']").removeClass("explode").addClass("collapse");
			$(this).attr({
				src: "/static/images/menu_plus.gif",
				title: "open"
			});
		} else {
			$("li[class='collapse'] > ul").show();
			$("li[class='collapse']").removeClass("collapse").addClass("explode");
			$(this).attr({
				src: "/static/images/menu_minus.gif",
				title: "close"
			});
		}
	});
	$('li.menu-item a').click(function(){
		$('li.menu-item a').css('background','')
		$(this).css('background','#defdef')
	})
});

</script>

<style type="text/css">
body {
  background: #80BDCB;
}
#tabbar-div {
  background: #278296;
  padding-left: 10px;
  height: 21px;
  padding-top: 0px;
}
#tabbar-div p {
  margin: 1px 0 0 0;
}
.tab-front {
  background: #80BDCB;
  line-height: 20px;
  font-weight: bold;
  padding: 4px 15px 4px 18px;
  border-right: 2px solid #335b64;
  cursor: hand;
  cursor: pointer;
}
.tab-back {
  color: #F4FAFB;
  line-height: 20px;
  padding: 4px 15px 4px 18px;
  cursor: hand;
  cursor: pointer;
}
.tab-hover {
  color: #F4FAFB;
  line-height: 20px;
  padding: 4px 15px 4px 18px;
  cursor: hand;
  cursor: pointer;
  background: #2F9DB5;
}
#top-div
{
  padding: 3px 0 2px;
  background: #BBDDE5;
  margin: 5px;
  text-align: center;
}
#main-div {
  border: 1px solid #345C65;
  padding: 5px;
  margin: 5px;
  background: #FFF;
}
#menu-list {
  padding: 0;
  margin: 0;
}
#menu-list ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  color: #335B64;
}
#menu-list li {
  padding-left: 16px;
  line-height: 16px;
  cursor: hand;
  cursor: pointer;
}
#main-div a:visited, #menu-list a:link, #menu-list a:hover {
  color: #335B64
  text-decoration: none;
}
#menu-list a:active {
  color: #EB8A3D;
}
.explode{
  background: url(/static/images/menu_minus.gif) no-repeat 0px 3px;
  font-weight: bold;
  margin-left: 10px;
}
.explode-one{
  background: url(/static/images/menu_minus.gif) no-repeat 0px 3px;
  font-weight: bold;
  margin-left: 10px;
}
.collapse {
  background: url(/static/images/menu_plus.gif) no-repeat 0px 3px;
  font-weight: bold;
  margin-left: 10px;
}
.menu-item {
  background: url(/static/images/menu_arrow.gif) no-repeat 0px 3px;
  font-weight: normal;
}
#help-title {
  font-size: 14px;
  color: #000080;
  margin: 5px 0;
  padding: 0px;
}
#help-content {
  margin: 0;
  padding: 0;
}
.tips {
  color: #CC0000;
}
.link {
  color: #000099;
}
.menu-one{
	width:100%;
	height:20px;
	background:#FFFFCD;
	line-height: 20px;
	padding-left:5px;
	cursor:pointer;
	margin:0 0 3px;
}
.left10{margin-left:10px;}
</style>

</head>
<body>
<div id="tabbar-div">
<p><span style="float:right; padding: 3px 5px;" ><img id="toggle" src="/static/images/menu_minus.gif" width="9" height="9" border="0" alt="close" title="close" /></span>
  <span class="tab-front" id="menu-tab">Division</span><span class="tab-back" id="help-tab"></span>
</p>
</div>
{% for menu in menu %}
  {% if menu.code %}
	<div id="main-div">
	<div id="menu-list" code="{{ menu.code }}">
	<div class="menu-one" title='open'>{{ menu.title }}</div>
	<ul>
	{% for menu_con in menu.content %}
	   {% if menu_con.code %}
		  {% if menu_con.type %}
			<li class="menu-item left10" code='{{ menu_con.code }}'><a href="{{ menu_con.content }}" target="main-frame">{{ menu_con.title }}</a></li>
		  {%else%}
			<li class="explode" code='{{ menu_con.code }}' >
				<span name="list">{{ menu_con.title }}</span>
				 <ul >
					{% for menu_con_c in menu_con.content %}
						{% if menu_con_c.code %}
							<li class="menu-item" code='{{ menu_con_c.code }}'><a href="{{ menu_con_c.content }}" target="main-frame">{{ menu_con_c.title }}</a></li>
						{%endif%}
					{% endfor %}
				 </ul>
			  </li>
		  {%endif%}
		{%endif%}
	 {% endfor %}
	</ul>
	</div>
	</div>
  {%endif%}
{% endfor %}
<div id="main-div">
<div id="menu-list">
<div class="menu-one" title='open'>My info</div>
<ul>

        <li class="menu-item left10"><a href="/modifyname" target="main-frame">Modify Info</a></li>
		<br />
		<li class="menu-item left10">Name:{{name}}</li>
		<li class="menu-item left10">Level:{{level}}</li>

</ul>
</div>

</div>

</body>
</html>